<!-- <h2>学生列表</h2>

<div>
  <label for="new-hero">添加学生————学生姓名: </label>
  <input id="new-hero" #heroName />


  <button class="add-button" (click)="add(heroName.value); heroName.value=''">
    添加学生
  </button>
</div>

<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
    <button class="delete" title="delete hero"
      (click)="delete(hero)">❌</button>
  </li>
</ul> -->

<ul>
  <li *ngFor="let hero of heroes" class="list-group-item list-group-item-light">
    <a>
      {{hero.id}} 
      <a class="text-center">{{hero.name}}</a>
    </a>
    <button routerLink="/detail/{{hero.id}}" type="button" class="btn btn-primary editStyle">编辑</button>
    <button class="delete" title="delete hero"
      (click)="delete(hero)">x</button>
    </li>
</ul>